import React, { useEffect, useState, useRef } from 'react';
import { useSewTask } from 'dw-mx-sew';
import { request } from 'dw-mx-request';
import { Table } from 'dw-mx';
import { StringCell } from 'dw-mx-table';

export default function BackGroundTask(props) {
    const { Column } = Table;
    // 流程任务
    const sewTask = useSewTask();
    const processVars = sewTask.getProcessVars();

    const [tableData, setTableData] = useState([]);

    useEffect(() => {
        initTableData();
    }, []);

    const initTableData = async () => {
        const result = await request('/mx/SEWEngine/getBackGroundTaskList', { piid: processVars.getPiid() });
        console.log('BackGroundTask ::: ', result);
        setTableData(result.result_message.tasklist);
    };

    const callback = async () => {};

    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedRowKeys) => {
            setSelectedRowKeys(selectedRowKeys);
        },
    };

    const tabPagination = {
        pageSize: 5,
        showQuickJumper: true,
    };

    return tableData ? (
        <>
            <div style={{ height: 550 }}>
                {/*<Table rowKey={'tid'} columns={columns} dataSource={tableData} scroll={{ x: 250, y: 300 }} pagination={tabPagination} />*/}

                <Table rowSelection={{ type: 'radio', columnWidth: '50', ...rowSelection }} rowKey={'tid'} dataSource={tableData} scroll={{ x: 250, y: 300 }} pagination={tabPagination} bordered>
                    <Column
                        ellipsis={true}
                        title="业务流水号"
                        dataIndex="piid"
                        key="piid"
                        align={'center'}
                        width={200}
                        render={(value, record, index) => {
                            return <StringCell value={value} align={'center'} />;
                        }}
                    />
                    <Column
                        ellipsis={true}
                        title="后台任务ID"
                        dataIndex="btid"
                        key="btid"
                        align={'center'}
                        width={200}
                        render={(value, record, index) => {
                            return <StringCell value={value} align={'center'} />;
                        }}
                    />
                    <Column
                        ellipsis={true}
                        title="后台任务名称"
                        dataIndex="btlabel"
                        key="btlabel"
                        align={'center'}
                        width={200}
                        render={(value, record, index) => {
                            return <StringCell value={value} align={'center'} />;
                        }}
                    />
                    <Column
                        ellipsis={true}
                        title="后台任务状态"
                        dataIndex="btflag"
                        key="btflag"
                        align={'center'}
                        width={200}
                        render={(value, record, index) => {
                            return <StringCell value={value} align={'center'} />;
                        }}
                    />
                    <Column
                        ellipsis={true}
                        title="创建时间"
                        dataIndex="createtime"
                        key="createtime"
                        align={'center'}
                        render={(value, record, index) => {
                            return <StringCell value={value} align={'center'} />;
                        }}
                    />
                </Table>
            </div>
        </>
    ) : (
        <div style={{ height: 550 }}>
            <div>Loading......</div>
        </div>
    );
}
